<template>
  <div class="formBox">
    <div style="margin-bottom: 40px">
      感谢您提出的宝贵意见和建议，如需任何帮助，请留下您的真实姓名、联系电话以便更好的与您联系！
    </div>
    <el-form
      v-loading="loading"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="留言姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址" prop="mail">
        <el-input v-model="ruleForm.mail"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="反馈类型" prop="type">
        <el-select
          v-model="ruleForm.type"
          clearable
          placeholder="请选择类型"
          style="width: 200px; margin-right: 20px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="反馈板块页面">
        <el-select
          v-model="ruleForm.menuId"
          clearable
          placeholder="请选择板块"
          style="width: 200px; margin-right: 20px"
        >
          <el-option
            v-for="item in menuOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="反馈信息" prop="content">
        <el-input
          :rows="3"
          type="textarea"
          v-model="ruleForm.content"
        ></el-input>
      </el-form-item>
      <el-form-item label="反馈信息" prop="content">
        <el-upload
          class="imgBox"
          :limit="1"
          action="https://jsonplaceholder.typicode.com/posts/"
          :file-list="fileList"
          :before-upload="beforePicUpload"
          list-type="picture-card"
          :http-request="handleUploadImg"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          :rows="3"
          type="textarea"
          v-model="ruleForm.remark"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交反馈</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  <script>
import Oss from '@/utils/oss'

export default {
  data() {
    return {
      loading: false,
      ruleForm: {
        address: '',
        content: '',
        mail: '',
        name: '',
        phone: '',
        remark: '',
        type: '',
        image: '',
        menuId: ''
      },
      menuOptions: [],
      options: [
        {
          label: '投诉',
          value: 1
        },
        {
          label: '留言',
          value: 2
        },
        {
          label: '建议',
          value: 3
        }
      ],
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        type: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        mail: [
          { required: false, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[34578]\d{9}$/,
            message: '目前只支持中国大陆的手机号码'
          }
        ]
      },
      fileList: [],
      stsToken: {
        accessKeyId: 'LTAI5tCQiELrNuXxFdf5wyuB',
        accessKeySecret: 'VlsN1KXHj4RV709wAOIHOnzjn9Qbke',
        bucket: 'utopia9527',
        region: 'oss-cn-shanghai'
      },
      oss: {}
    }
  },
  created() {
    window.console.log(this.$route.path)
    this.oss = new Oss(this.stsToken, window)
    this.oss.__init__()
    this.$http
      .get('/companyWeb/menu/listAll')
      .then((response) => {
        this.menuOptions = response.data.obj.data
        // this.menuOptions.unshift({
        //   name: '首页',
        //   path: '/'
        // })
        window.console.log(this.menuOptions)
        // this.loading = false
      })
      .catch(function (error) {
        window.console.log(error)
      })
  },
  methods: {
    handleUploadImg(param) {
      console.log(param)
      this.oss.__main__('activity', 'uploadImg', param).then((res) => {
        if (res.res.status === 200) {
          this.$message.success('上传成功')
          console.log(res.res.requestUrls)
          this.ruleForm.image = res.res.requestUrls[0].split('?uploadId=')[0]
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    beforePicUpload(file) {
      const _this = this
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        // this.$Mint.Toast(')
        _this.$message.error({
          message: '上传图片只能是jpg或者png格式!'
        })
      }
      if (!isLt2M) {
        // this.$Mint.Toast('')
        _this.$message.error({
          message: '上传图片大小不能超过2MB!'
        })
      }

      return isJPG && isLt2M
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http
            .post('/companyWeb/suggestion/add', this.ruleForm)
            .then((res) => {
              console.log(res)
              if (res.data.code === 1) {
                this.$message.success('提交成功等待回复')
                this.resetForm('ruleForm')
                setTimeout(() => {
                  this.$router.push('/')
                }, 2000)
              } else {
                this.$message.error(res.data.msg)
              }
              console.log(123)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.fileList = []
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.formBox {
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 100px;
  padding: 60px 100px 80px 100px;
  box-sizing: border-box;
  width: 800px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #f2f2f2;
  box-shadow: 0 2px 12px 0 #d1cece;

  .demo-ruleForm {
    width: 100%;
  }
}
</style>
